<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户管理系统</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			color:#424242;
		}
		#tit{
			margin: 20px 0 0 20px;
		}
		#tit h1{
			color: #0A8;
			font-size: 50px;
		}
		.outside{
			width:1500px;
			height:2px;
			background-color: #0A8;
		}
		#login{
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -150px 0 0 -150px;
			width: 300px;
			height: 330px;
		}
		input{    
		    width: 278px;    
		    height: 18px;    
		    margin-bottom: 10px;    
		    outline: none;    
		    padding: 10px;    
		    font-size: 13px;    
		    color: #0A8;      
		    border: 1px solid #0A8;       
		    border-radius: 10px;  
		    background-color: #fff;         
		}
		#login h1{    
		    color: #0A8;    
		    font-size: 40px;    
		    margin: 20px 20px 10px 110px;    
		}
		.but{    
		    width: 300px;
		    min-height: 20px;    
		    display: block;    
		    background-color: #fff;    
		    border: 1px solid #0A8;    
		    color: #0A8;    
		    padding: 9px 14px;    
		    font-size: 15px;    
		    border-radius: 10px;    
		}  
	</style>

</head>
<body bgcolor="#BFE">
	<div id="tit">
		<h1>用户管理系统</h1>
	</div>
	<div class="outside"></div>
	<div id="login">
			<h1>注册</h1>
		<p>
			<input type="text" placeholder="用户名" id="InputUsername" name="Username"></input>
		</p>
		<p>
			<input type="text" placeholder="邮箱" id="InputEmail" name="Email"></input>
		<p>
			<input type="text" placeholder="密码" id="InputPassport" name="Passport"></input>
		</p>
		<p>
			<input type="text" placeholder="确认密码" id="InputPassport_comfirm" name="Passport_comfirm"></input>
		</p>
		<p>
			<button class="but">注册</button>
		</p>
	</div>

	<script>
		function Main(){
			var Username = document.getElementById('InputUsername').value;
			var Email = document.getElementById('InputEmail').value;
			var Passport = document.getElementById('InputPassport').value;
			var Passport_comfirm = document.getElementById('InputPassport_comfirm').value;
			CheckUsername(Username);
			CheckEmail(Email);
			CheckPassport(Passport, Passport_comfirm);
			var storage = window.localStorage;
			var Sname = storage.Username;
			if (Username == Sname){
				alert("该用户名已被使用");
				return;
			}
			storage["Username"] = Username;
			storage["Passport"] = Passport;
			storage["Email"] = Email;
			var date = new Date();
			var time = Date.toLocaleString();
			storage["Time"] = time;
			alert("注册成功");
		}
		function CheckUsername(Username){
	
			if (Username == "" || Username == null){
				alert ("请输入用户名")；
				return;
			}
		function CheckEmail(Email) {
			var pos1=Email.indexOf("@");
    		var pos2=Email.indexOf(".");
			if (Email == "") {
				alert ("请输入邮箱")；
				return;
			}
			if (pos1<1 || pos2 - pos1 < 2 || dotpos+3>Email.length){
				alert("请输入正确的邮箱");
				return;
			}
		}
		function CheckPassport(Passport, Passport_comfirm){
			if (Passport == ""){
				alert("请输入密码");
				return;
			}
			if (Passport_comfirm == ""){
				alert("请再次输入密码");
				return;
			}
			if (Passport != Passport_comfirm){
				alert("两次密码输入不一致");
				return;
			}
		}
	</script>
</body>
</html>